<template>
  <div class="app-container">
    用户设置
    <el-form label-width="120px">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="16" :md="12">
          <el-form-item label="分类名">
            <el-select v-model="contentObj.mid" placeholder="请选择分类">
              <el-option
                v-for="item in metas"
                :key="item.mid"
                :label="item.name"
                :value="item.mid"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :xs="24" :sm="16" :md="12">
          <el-form-item label="状态">
            <el-select v-model="contentObj.status" placeholder="请选择状态">
              <el-option
                v-for="item in selectStatus"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :xs="24" :sm="16" :md="12">
          <el-form-item label="方式">
            <el-select v-model="contentObj.ctype" placeholder="请选择方式" disabled>
              <el-option
                v-for="item in selectCtype"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :xs="24" :sm="14" :md="12">
          <el-form-item label="发表内容">
            <el-input
              autosize
              type="textarea"
              :autosize="{ minRows: 3, maxRows: 10 }"
              v-model="contentObj.content"
              disabled
            />
          </el-form-item>
        </el-col>
      </el-row>

      <div v-if="contentObj.ctype == 1">
        <div v-for="(item, index) in contentObj.pictureUrl">
          <el-row :gutter="10">
            <el-col :xs="24" :sm="14" :md="12">
              <el-form-item label="图片">
                <el-image :src="item" style="height: 200px">
                  <div slot="placeholder" class="image-slot">
                    加载中<span class="dot">...</span>
                  </div>
                </el-image>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>

      <div v-if="contentObj.ctype == 2">
        <el-row :gutter="10">
          <el-col :xs="24" :sm="14" :md="12">
            <el-form-item label="视频">
              <video
                :src="contentObj.pictureUrl[0]"
                align="center"
                poster=""
                autoplay=""
                height="500"
                preload="auto"
                muted=""
                controls="true"
              >
                your browser does not support the video tag
              </video>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <el-form-item>
        <el-button type="primary" @click="update">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>


<script>
//引入接口定义的js文件
import contentApi from "@/api/contentSet";
import metaSet from "@/api/metaSet";

export default {
  data() {
    return {
      contentObj: {},
      metas: [], //分类集合
      selectStatus: [
        {
          value: 0,
          label: "审核",
        },
        {
          value: 1,
          label: "正常",
        },
        {
          value: 2,
          label: "下架",
        },
      ],
      selectCtype: [
        {
          value: 0,
          label: "文字",
        },
        {
          value: 1,
          label: "图文",
        },
        {
          value: 2,
          label: "视频",
        },
      ],
    };
  },
  //页面渲染之前执行
  created() {
    //获取路由id值 调用接口得到信息
    if (this.$route.params && this.$route.params.cid) {
      const cid = this.$route.params.cid;
      this.getContent(cid);
    }
    this.getMetaAll();
  },

  methods: {
    //分类列表
    getMetaAll() {
      metaSet.getAll().then((response) => {
        this.metas = response.data;
      });
    },
    //更新
    update() {
      contentApi.edit(this.contentObj).then((response) => {
        //提示
        this.$message({
          type: "success",
          message: "添加成功!",
        });

        //跳转列表页面，使用路由跳转方式实现
        this.$router.push({ path: "/contentSet/list" });
      });
      // .catch((response) => {
      //   //添加错误
      //   this.$message({
      //     type: "error",
      //     message: response.message,
      //   });
      // });
    },
    getContent(uid) {
      contentApi.getContentSet(uid).then((response) => {
        this.contentObj = response.data;
      });
    },
  },
};
</script>
